<template>
  <div class="album">
    <div class="w1200">
      <div class="album-cover">
        <div class="cover">
          <el-image :src="albumPart.picUrl"></el-image>
          <img class="after" src="@/assets/disc.png" />
        </div>
        <div class="album-info">
          <div class="title">
            <h2>
              {{ albumPart.name }}<span> #{{ albumPart.type }}</span>
            </h2>
          </div>
          <div class="introduce">
            <div class="album-singer">
              歌手: <span>{{ albumPart.artist.name }}</span>
            </div>
            <div>发行时间: {{ $util.getSongDate(albumPart.publishTime,true) }}</div>
            <div>发行公司: {{ albumPart.company }}</div>
          </div>
          <div class="brief-introduction">
            <h3>歌单简介</h3>
            <div class="album-content" @click="isbrief = !isbrief">
              <p>{{ albumPart.description + "..." }}</p>
              <span style="color: #999">...</span>
            </div>
            <div class="brief" v-show="isbrief" @click="isbrief = !isbrief">
              <p>{{ albumPart.description }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="album-main">
        <div class="album-main-left">
          <div class="song-header">
            <h4>
              包含所有歌曲 <span>{{ songList.length }}首歌曲</span>
            </h4>
            <div class="play-collect">
              <div class="btn" @click="playAll"><i class="el-icon-caret-right"></i>播放全部</div>
              <div class="btn collect">
                <i class="el-icon-star-off"></i>收藏
              </div>
            </div>
          </div>
          <div class="songmain">
            <song :songList="songList"></song>
          </div>
          <div class="album-comment">
            <comments :comment_params="albumCommentParams" :type=3></comments>
          </div>
        </div>
        <div class="album-main-right">
            <div class="amr-title">
                <h4>{{albumPart.artist.name}}的其他专辑</h4>
                <router-link :to="{name:'Singer',query:{id:albumPart.artist.id}}"><span>全部>></span></router-link>
            </div>
            <ul class="album-aside">
                <li class="aside-item" v-for="item in hotAlbumsList" :key="item.id">
                    <div class="aside-item-img">
                      <el-image :src="item.picUrl"></el-image>
                    </div>
                    <div class="aside-item-main">
                        <div class="item-main-top">{{item.name | handleFont}}</div>
                        <div class="item-main-bottom">{{$util.getSongDate(item.publishTime,true)}}</div>
                    </div>
                </li>
            </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapMutations}from "vuex"
import { formatSongInfo } from "@/utils/songs";
import Song from "@/components/common/Song-list.vue";
import Comments from '@/components/common/Comments.vue'
export default {
  components: {
    Song,
    Comments
  },
  data() {
    return {
      albumPart:{picUrl:'',name:'',type:'',artist:{name:''}},
      songList: [],
      hotAlbumsList:[],
      isbrief: false,
      // albumId:this.$route.query.id,
      albumCommentParams:{
        id:this.$route.query.id,
        limit:20,
        offset:0,
        before:0
      }
    };
  },
  async created() {
    const id = this.$route.query.id;
    // console.log(id)
    await this.getAlbum(id);
    // console.log(this.albumPart)
  },
  computed: {},
  methods: {
      ...mapMutations(['setPlayList','setIsPlayed','setPlayIndex']),
    async getAlbum(id) {
      const res = await this.$api.getAlbum(id);
      this.albumPart = res.album;
      this._formatSongInfo(res.songs);
      // console.log(res);
      this.getAlbumDetail(res.album.artist.id);
      this.getArtistAlbum(res.album.artist.id)
    },
    async getAlbumDetail(id) {
      const res = await this.$api.getAlbumDetail(id);
      // console.log(res);
    },
    async getArtistAlbum(id){
        const res =await this.$api.getArtistAlbum({id,limit:5});
        this.hotAlbumsList=res.hotAlbums
        // console.log(res);
    },
    _formatSongInfo(arr) {
      arr.forEach((item, index) => {
        if (item.id) {
          item.license = !arr[index].privilege.cp;
          this.songList.push(formatSongInfo(item));
        }
      });
    },
    playAll(){
        this.setPlayList(this.songList);
        this.setIsPlayed(true);
        this.setPlayIndex(0);
    },
  },
};
</script>
<style lang="less" scoped>
.album {
  width: 100%;
  .w1200 {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 60px;
    .album-cover {
      width: 100%;
      height: 341px;
      padding: 40px 0;
      //   border: 1px solid yellow;
      display: flex;
      .cover {
        width: 260px;
        height: 260px;
        // border: 1px solid #ccc;
        position: relative;
        .el-image {
          width: 100%;
          height: 100%;
        }
        .after {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 40px;
          top: 0;
          z-index: -1;
        }
      }
      .album-info {
        flex: 1;
        padding-left: 70px;
        // border: 1px solid blue;
        .title {
          font-size: 16px;
          padding-bottom: 20px;
          span {
            color: #ff641e;
            font-size: 14px;
          }
        }
        .introduce {
          color: #999;
          div {
            padding-bottom: 8px;
          }
          .album-singer {
            span {
              color: #333;
            }
          }
        }
        .brief-introduction {
          padding-top: 20px;
          padding-bottom: 15px;
          color: #333;
          cursor: pointer;
          position: relative;
          h3 {
            padding-bottom: 5px;
          }
          .brief {
            position: absolute;
            min-height: 500px;
            top: 0;
            left: 0;
            z-index: 10;
            background-color: #333;
            p {
              position: absolute;
              top: 50px;
              left: 0px;
              z-index: 10;
              width: 869px;
              height: 200px !important;
              line-height: 22px;
              font-size: 14px;
              padding-left: 20px;
              padding-right: 20px;
              white-space: pre-line;
              font-family: inherit;
              color: #999;
              background: #fff;
              overflow-y: scroll;
              box-shadow: 0 2px 10px 0 rgba(52, 52, 52, 0.1);
            }
          }
          p {
            color: #999;
            height: 66px;
            line-height: 22px;
            white-space: pre-line;
            -webkit-line-clamp: 4;
            overflow: hidden;
            span {
              margin-top: -20px;
            }
          }
        }
      }
    }
    .album-main {
        display: flex;
      .album-main-left {
        .song-header {
          width: 880px;
          height: 50px;
          padding-bottom: 10px;
          display: flex;
          h4 {
            font-size: 20px;
            width: 648px;
            height: 40px;
            color: #333;
            span {
              color: #999;
              font-size: 12px;
              font-weight: 500;
              margin-left: 10px;
            }
          }
          .play-collect {
            flex: 1;
            padding-left: 20px;
            display: flex;
            .btn {
              width: 115px;
              height: 30px;
              border-radius: 50px;
              background-color: #ff641e;
              color: #fff;
              cursor: pointer;
              text-align: center;
              line-height: 30px;
              padding-left: 25px;
              position: relative;
              i {
                position: absolute;
                font-size: 20px;
                left: 15px;
                top: 4px;
              }
            }
            .collect {
              background-color: #f0f0f0;
              color: #333;
              margin-left: 15px;
              width: 80px;
              i {
                font-size: 15px;
                top: 7px;
              }
            }
          }
        }
        .songmain {
          /deep/.song-list {
            width: 880px;
            margin: 0;
          }
        }
      }
      .album-main-right{
          width: 320px;
          padding-left: 20px;
          min-height: 300px;
        //   border: 1px solid #ccc;
          .amr-title{
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 300px;
              height: 20px;
              h4{
                  font-size: 16px;
                  color: #333;
                  position: relative;
              }
              h4::before{
                  display: block;
                  content: '';
                  position: absolute;
                  top: 1px;
                  left: -10px;
                  width: 4px;
                  border-radius: 3px;
                  height: 20px;
                  background-color: #ff641e;
              }
              span{
                  color: #666;
                  font-size: 12px;
                  font-family: inherit;
                  cursor: pointer;
              }
          }
          .album-aside{
              width: 100%;
              .aside-item{
                  width: 100%;
                  height: 80px;
                  padding: 10px 0;
                  display: flex;
                  cursor: pointer;
                .aside-item-img{
                    width: 60px;
                    height: 60px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .aside-item-main{
                    flex: 1;
                    padding-left: 10px;
                    height: 60px;
                    .item-main-top{
                        color: #333;
                        padding-bottom: 15px;
                    }
                    .item-main-bottom{
                        color: #999;
                        font-size: 12px;
                        padding-top: 5px;
                    }
                }
              }
          }
      }
    }
  }
}
</style>
